import { createStore } from 'redux';

/*
  学习目标：使用subscribe监听仓库的数据变化
*/

const store = createStore(function (state = { count: 0, msg: '123', list: [] }, action) {
  // console.warn('action  ----->  ', action);
  if (action.type === 'add') {
    return {
      ...state,
      count: state.count + 1,
    };
  }

  if (action.type === 'des') {
    return {
      ...state,
      count: state.count - 1,
    };
  }
  return state;
});

// subscrib作用：监听仓库数据的变化
// 语法：const 关闭监听的函数= store.subscribe(() => { 回调函数内，可以访问改变后的数据})
// 注意：
// 💥 subscribe调用，要在dispatch调用之前，否则类似没有开启监听
// 💥 unFn是关闭监听，dispatch在期之后调用，仍然没有监听的效果
store.dispatch({ type: 'add' });
store.dispatch({ type: 'des' });

const unFn = store.subscribe(() => {
  // 回调函数会在每次state变化时，自动执行
  // 这里可以获取到更新后的值
  console.log('store.getState()  ----->  ', store.getState().count);
});

// 主动取消监听仓库数据的变化
unFn(); // 类似removeEventListener

store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
